<template>
	<div>
		<div class="flex justify-start align-center" v-show="showAddBtn">
			<el-button class="" type="primary" @click.native="addSetting" round size="mini">新增配置
			</el-button>
		</div>
		<el-divider class="point-dist-divider" v-if="showTitle">点位分配</el-divider>
		<template v-for="(settingItem,settingIdx) in settings">
			<div class="flex justify-end align-center margin-tb-xs" v-show="showDelBtn">
				<el-button type="danger" round size="mini" @click.native="delSetting(settingIdx)">删除配置
				</el-button>
			</div>
			<div class="flex justify-start align-center">
				<el-checkbox v-model="settingItem.checked" style="margin-right: 10px !important;" v-if="showCheckBox" class="shadow-blue"></el-checkbox>
				<div class="flex-auto">
					<el-table class="margin-bottom-sm" :data="settingItem.building_areas" style="width: 100%" size="mini">
						<el-table-column :label="(showContractName?('《'+(settingItem.contract_name || '')+'》 \n '):'')+(hasDateRange?(settingItem.date_range[0].substring(0,10)+' ~ '+settingItem.date_range[1].substring(0,10)):'')" align="center">
							<el-table-column prop="name" label="楼盘名称" min-width="150" align="center">
							</el-table-column>
							<el-table-column v-for="point in settingItem.point_types" :label="point.name+(settingItem.one_limit&&settingItem.one_limit[point.id]?' (一层一个)':'')
							+(settingItem.floor_limit&&settingItem.floor_limit[point.id]!=1?(settingItem.floor_limit[point.id]==2?' (地上)':(settingItem.floor_limit[point.id]==3?' (地下)':'')):'')" min-width="150" align="center">
								<template slot-scope="scope">
									<el-input-number v-if="showNumberInput" size="mini" v-model="settingItem.to[scope.row.id+'_'+point.id]" :min="(settingsData[settingIdx].to[scope.row.id+'_'+point.id] || 0)" :step="1" step-strictly></el-input-number>
									<span v-else>{{settingItem.to[scope.row.id+"_"+point.id] || 0}}</span>
									<el-button style="font-size:12px;margin-left:10px;" type="text" v-if="(((settingItem || {}).to_exact || {})[scope.row.id+'_'+point.id] || []).length>0" @click.native="showExacts((((settingItem || {}).to_exact || {})[scope.row.id+'_'+point.id] || []))">精确点位<span>({{(((settingItem || {}).to_exact || {})[scope.row.id+'_'+point.id] || []).length}})</span></el-button>
									<tempalte v-if="!!showReleaseTag && !!releases">
										<el-tag class="margin-left-sm" size="mini" effect="plain" v-if="releases && releases[settingItem.uuid[scope.row.id+'_'+point.id]] && releases[settingItem.uuid[scope.row.id+'_'+point.id]].released_at">已释放</el-tag>
										<el-button style="font-size:12px;margin-left:10px;" type="text" v-else v-show="showReleaseBtn && settingItem.to[scope.row.id+'_'+point.id]" @click.native="releaseOne(releases[settingItem.uuid[scope.row.id+'_'+point.id]].id)">释放</el-button>
									</tempalte>
								</template>
							</el-table-column>
							<el-table-column :label="point.name+'规则'" min-width="150" align="center" v-if="settingItem.show_rules" 
							v-for="point in settingItem.point_types" :key="point.id">
								<template slot-scope="scope">
									<div class="flex flex-direction justify-start align-center">
										<el-tag v-for="rule in (((settingItem || {}).rules || {})[scope.row.id+'_'+point.id] || [])" :key="rule.id" type="primary" size="mini" 
										class="margin-lr-xs margin-tb-xxs" disable-transitions effect="plain">{{ rule.desp }}
										</el-tag>
									</div>
								</template>
							</el-table-column>
						</el-table-column>
					</el-table>
					<el-input v-if="hasSetRemark" :disabled="disableSetRemark" type="textarea" :rows="2" clearable v-model.trim="settingItem.remark" placeholder="请输入备注" />
				</div>
			</div>
		</template>
		
		<!-- 期望时间段选择弹框 -->
		<el-dialog :close-on-click-modal="false" title="期望时间段" center :visible.sync="dialogDateRange" width="40%"
			@close="dialogCUClose('dateRangeForm')">
			<el-form ref="dateRangeForm" :model="dateRangeForm" label-width="100px" center>
				<el-row class="margin-top-sm">
					<el-col :span="24">
						<el-form-item label="期望时间段" prop="dateRange">
							<el-col :span="24">
								<el-date-picker :editable="false" :clearable="false" 
									size="small" v-model="dateRangeForm.dateRange" type="daterange"
									range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
									format="yyyy年MM月dd日" value-format="yyyy-MM-dd HH:mm:ss"
									:default-time="['00:00:00', '23:59:59']" style="width:350px">
								</el-date-picker>
							</el-col>
						</el-form-item>
						<el-form-item label="选点方式" prop="type" v-show="hasToTypeChoose">
							<el-col :span="24">
								<el-radio-group v-model="dateRangeForm.type">
								    <el-radio :label="1">地图</el-radio>
								    <el-radio :label="2">列表</el-radio>
								</el-radio-group>
							</el-col>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click.native="dialogDateRange=false" size="mini">取 消</el-button>
				<el-button type="primary" @click.native="choosedDateRange()" size="mini">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog :close-on-click-modal="false" append-to-body title="精准点位" center :visible.sync="exactVisible" width="70%"
			@closed="dialogCUClose('exactTable')">
			<el-table ref="exactTable" :data="exactList" stripe size="mini" tooltip-effect="dark" style="width: 100%;" max-height="400"
				border highlight-current-row row-key="id">
				<el-table-column type="index" width="50" />
				<el-table-column label="点位" width="120" prop="media_type" />
				<el-table-column label="编号" width="120" prop="code" sortable />
				<el-table-column label="详情" min-width="200">
					<template slot-scope="scope">
						<span v-if="scope.row.media_type_pid==119">{{scope.row.building_number}} 号楼
							{{scope.row.unit_number}} 单元 {{scope.row.floor}} 层</span>
						<span v-else-if="scope.row.media_type_pid==120">
							{{scope.row.door_number}} 号门
							<span v-if="scope.row.media_type_id==135">{{scope.row.rail_number}} 号护栏</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="特点" width="120" prop="media_feature" sortable />
			</el-table>
			<div class="margin-tb-xs text-sm">共计<span class="text-green">{{(exactList || []).length || 0}}</span>个</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click.native="exactVisible=false;dialogCUClose('exactTable')">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import common from '@/utils/common.js';
	import {
		cloneDeep
	} from 'lodash'
	import {
		formatDate
	} from '@/utils/util.js'
	export default {
		name: 'ChoosedSettingShow',
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		props: {
			settings:{
				type: Array,
				default: () => []
			},
			releases:{
				type: Object,
				default: () => ({})
			},
			showReleaseTag: {
				type: Boolean,
				default: true
			},
			showNumberInput:{
				type: Boolean,
				default: false
			},
			showAddBtn:{
				type: Boolean,
				default: true
			},
			showDelBtn:{
				type: Boolean,
				default: true
			},
			showReleaseBtn:{
				type: Boolean,
				default: false
			},
			showTitle:{
				type: Boolean,
				default: true
			},
			showCheckBox:{
				type: Boolean,
				default: false
			},
			showContractName:{
				type: Boolean,
				default: false
			},
			showPrevChooseDateRange:{
				type: Boolean,
				default: true
			},
			hasDateRange: {
				type: Boolean,
				default: true
			},
			hasSetRemark: {
				type: Boolean,
				default: false
			},
			hasToTypeChoose:{ // 时间段选框中，是否存在前往类型（地图/列表）选择项
				type: Boolean,
				default: false
			},
			disableSetRemark: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				dialogDateRange: false,
				dateRangeForm:{
					type: 1, // 1地图  2列表
					dateRange: [formatDate(new Date())+ ' 00:00:00',formatDate(new Date()) + ' 23:59:59']
				},
				exactVisible: false,
				exactList:[],
				settingsData: JSON.parse(JSON.stringify(this.settings))
			}
		},
		mounted() {
		},
		methods: {
			showExacts(list){
				this.exactList = cloneDeep(list)
				this.exactVisible = true
			},
			// 关闭弹窗
			dialogCUClose(formName) {
				const that = this
				switch (formName) {
					case 'dateRangeForm':
						that.$refs['dateRangeForm'].clearValidate()
						that.resetDateRangeForm()
						break;
					case 'exactTable':
						that.exactList=[];
						break;
				}
			},
			resetDateRangeForm(){
				this.dateRangeForm = {
					dateRange: [formatDate(new Date())+ ' 00:00:00',formatDate(new Date()) + ' 23:59:59']
				}
			},
			choosedDateRange(){
				const that = this;
				let dateRange = cloneDeep(that.dateRangeForm.dateRange);
				let type = parseInt(that.dateRangeForm.type);
				that.dialogCUClose('dateRangeForm');
				that.$emit('add-setting', dateRange, type);
			},
			getCheckedSettings(){
				const that = this
				let arr = []
				that.settings.forEach(set => {
					if(set.checked) arr.push(set)
				})
				return arr
			},
			initSettings(settings){
				this.settings = cloneDeep(settings)
			},
			pushSetting(setting){
				this.settings.push(setting)
			},
			addSetting(){
				const that = this
				if(that.showPrevChooseDateRange){
					// 显示时间段选框
					that.dialogDateRange = true
				}else{
					that.$emit('add-setting')
				}
			},
			async releaseOne(id){
				const confirm = await common.confirmDialog('一旦释放无法恢复，您确认吗？')
				if(confirm){
					this.$emit('release-one',id)
				}
			},
			async delSetting(index){
				const confirm = await common.confirmDialog('您确定要删除该配置？')
				if(confirm){
					const uuid = this.settings[index].setting_uuid
					this.settings.splice(index, 1)
					this.$emit('del-setting', uuid)
				}
			}
			
		}
	}
</script>

<style scoped lang="scss">
	/deep/.el-table .cell{
		white-space:pre-line;
	}
</style>
